<template>
  <div class="about">
    <ul>
      <li v-for="item in list" :key="item.id">
        <span>{{ item.add_time }}</span> <span>{{ item.title }}</span>
        <button @click="del(item.id)">删除</button>
      </li>
    </ul>
    <button @click="up">上一页</button>
    <button @click="next">下一页</button>
    <hr />
    <div>
      <div>
        <label>标题：</label>
        <input type="text" v-model="addParams.title" />
      </div>
      <div>
        <label>内容：</label>
        <input type="text" v-model="addParams.content" />
      </div>
      <button @click="add">新增</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      addParams: {
        title: "",
        content: "",
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.$axios
        .get("/api/get/news", {
          params: this.params,
        })
        .then(({ data }) => {
          console.log(data);
          if (data.status === 200) {
            this.list = data.list;
          }
        });
    },
    next() {
      this.params.pageNum += 1;
      this.getData();
    },
    up() {
      if (this.params.pageNum > 1) {
        this.params.pageNum -= 1;
      }
      this.getData();
    },
    add() {
      this.$axios.post("/api/add/news", this.addParams).then(({ data }) => {
        if (data.status === 200) {
          this.list = data.list;
        }
      });
    },
    del(id){
      this.$axios.post("/api/delete/news", {id}).then(({ data }) => {
        console.log(data);
        if (data.status === 200) {
          this.list = data.list;
        }
      });
    }
  },
};
</script>
